<template>
    <div class="relation">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="20">
                        <div>
                            <span class="border-left"></span>
                            用户关系管理
                        </div>
                    </Col>
                    <Col :span="4">
                        <div class="back">
                            <span class="back-btn" @click="back">
                                <Icon type="ios-arrow-back" />
                                返回
                            </span>
                            
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="search-box">
                    <Row>
                        <Col :xs="7" :sm="6" :md="6" :lg="6">
                            用户账号：
                            <Input v-model="userId" placeholder="用户ID/账号" style="width:auto"/>
                        </Col>
                        <Col :xs="7" :sm="8" :md="8" :lg="6">
                            注册时间：
                            <DatePicker v-model="time" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))" type="daterange" placement="bottom" placeholder="请选择时间" style="width: auto"></DatePicker>
                        </Col>
                        <Col :xs="3" :sm="4" :md="4" :lg="6">
                            <div class="search-btn">查询</div>
                        </Col>
                    </Row>
                </div>

                <div class="userName">
                    王五的邀请关系
                </div>

                <div class="table-box">
                    <el-table
                        :data="tableData"
                        size="mini"
                        style="width: 100%">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="userId"
                            label="用户账号">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="userName"
                            label="用户昵称">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="邀请关系">
                            <template slot-scope="scope">
                                <p>{{scope.row.relation === '1' ? '第一层级' : scope.row.relation === '2' ? '第二层级' : '第三层级'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="消费金额">
                            <template slot-scope="scope">
                                <p>￥{{scope.row.consumption}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="可用余额">
                            <template slot-scope="scope">
                                <p>￥{{scope.row.balance}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="time"
                            label="邀请时间">
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="200"
                            align="center">
                            <template slot-scope="scope">
                                <!-- <el-button type="text" size="small" @click="look(scope.row.userId)">查看详情</el-button> -->
                                <el-button type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="page-box">
                    <Page :total="total" :page-size="pageSize" show-elevator show-total />
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                host: window.location.host,
                userId: '',//用户账号/ID
                userName: '',//用户名称
                time: '',//日期
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },//日期选择范围配置
                tableData: [],//表格数据
                total: 8,//数据总条数
                pageSize: 10,//每页显示条数
            }
        },
        mounted(){
            this.getTableData();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            back() {
                this.$router.back();
            },

            getTableData() {
                this.tableData = [
                    {
                        userId: '18000000000',
                        userName: '张三',
                        userJob: '程序猿',
                        relation: '1',
                        consumption: '2000',
                        balance: '5000',
                        time:'2018年06月25日'
                    },
                    {
                        userId: '18000000000',
                        userName: '张三',
                        userJob: '程序猿',
                        relation: '1',
                        consumption: '2000',
                        balance: '5000',
                        time:'2018年06月25日'
                    },
                    {
                        userId: '18000000000',
                        userName: '张三',
                        userJob: '程序猿',
                        relation: '1',
                        consumption: '2000',
                        balance: '5000',
                        time:'2018年06月25日'
                    },
                    {
                        userId: '18000000000',
                        userName: '张三',
                        userJob: '程序猿',
                        relation: '1',
                        consumption: '2000',
                        balance: '5000',
                        time:'2018年06月25日'
                    },
                    {
                        userId: '18000000000',
                        userName: '张三',
                        userJob: '程序猿',
                        relation: '1',
                        consumption: '2000',
                        balance: '5000',
                        time:'2018年06月25日'
                    },
                    {
                        userId: '18000000000',
                        userName: '张三',
                        userJob: '程序猿',
                        relation: '1',
                        consumption: '2000',
                        balance: '5000',
                        time:'2018年06月25日'
                    },
                    {
                        userId: '18000000000',
                        userName: '张三',
                        userJob: '程序猿',
                        relation: '1',
                        consumption: '2000',
                        balance: '5000',
                        time:'2018年06月25日'
                    },
                    {
                        userId: '18000000000',
                        userName: '张三',
                        userJob: '程序猿',
                        relation: '1',
                        consumption: '2000',
                        balance: '5000',
                        time:'2018年06月25日'
                    },
                ]
            },

            look(userId) {
                // this.$router.push({name:'UserDetails',params:{userId}})
            },

            lookShip(userId) {
                this.$router.push({name:'Relation',params:{userId}})
            }
        }  
    }
</script>


<style lang="less">
@import '../../assets/styles/constant.less';
    .relation{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
            .back{
                text-align: right;
                color: #999;
                .back-btn{
                    cursor: pointer;
                    background-color: #fff;
                    padding: 6px 10px;
                    border: 1px solid #ddd;
                }
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .search-box{
                .search-btn{
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background-color: @greenColor;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                }
            }
            .userName{
                height: 40px;
                line-height: 40px;
                margin-top: 20px;
                width: 200px;
                background-color: #fff;
                text-indent: 10px;
                font-size: 16px;
                color: #999;
                border: 1px solid #eee;
            }
            .table-box{
                margin-top: 20px;
                min-width: 100%;
                .el-table th{
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }
                .el-button--text{
                    color: @greenColor;
                }
            }
            .page-box{
                height: 50px;
                line-height: 50px;
                text-align: right;
                background-color: #fff;
                padding: 0 20px;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>